<template>
  <div top="50">
    <div class="form-body">
      <el-form ref="form" :model="form" :inline="true" :rules="rules" size="small" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品名称">
              <el-input v-model="form.storeName" style="width: 730px;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="产品条码">
              <el-input v-model="form.barCode" style="width: 350px;" />
            </el-form-item>
            <el-form-item label="关键字">
              <el-input v-model="form.keyword" style="width: 200px;" />
            </el-form-item>
            <el-form-item label="单位名">
              <el-input v-model="form.unitName" style="width: 100px;" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="商品分类">
          <treeselect v-model="form.cateId" :options="cates" style="width: 320px;" placeholder="选择商品分类" />
        </el-form-item>
        <el-form-item label="供应商">
          <el-select v-model.number="form.supplierId" placeholder="选择供应商" style="width: 320px" clearable @change="supplierChage" @clear="supplierClear">
            <el-option v-for="item in suppliers" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
          <!-- <treeselect v-model="form.supplierId" :options="suppliers" style="width: 320px;" placeholder="选择供应商" /> -->
        </el-form-item>

        <el-form-item label="商品图片">
          <MaterialList v-model="form.imageArr" style="width: 500px" type="image" :num="1" :width="150" :height="150" />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="视频图片">
              <MaterialList v-model="form.videoImageArr" style="width: 500px" type="image" :num="1" :width="250" :height="150" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="视频上传">
              <file-upload v-model="form.videoUrl" style="width: 250px;" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预览">
              <div style="z-index:999;display: block;width:250px;">
                <video-player
                  ref="videoPlayer"
                  class="video-player vjs-custom-skin"
                  :playsinline="true"
                  :options="playerOptions"
                  @play="onPlayerPlay($event)"
                  @pause="onPlayerPause($event)"
                />
              </div>
              <!-- <MaterialList v-model="form.videoUrl" style="width: 250px" type="image" :num="1" :width="250" :height="150" /> -->
            </el-form-item>
          </el-col>

        </el-row>

        <el-form-item label="轮播图">
          <MaterialList v-model="form.sliderImageArr" style="width: 500px" type="image" :num="5" :width="150" :height="150" /></el-form-item>
        <el-form-item label="商品简介">
          <el-input v-model="form.storeInfo" style="width: 500px;" rows="5" type="textarea" />
        </el-form-item>
        <el-form-item label="推荐语">
          <el-input v-model="form.recommendation" style="width: 500px;" rows="5" type="textarea" />
        </el-form-item>
        <el-form-item label="产品描述">
          <editor v-model="form.description" />
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="form.price" />
        </el-form-item>
        <el-form-item label="市场价">
          <el-input v-model="form.otPrice" />
        </el-form-item>
        <el-form-item label="成本价">
          <el-input v-model="form.cost" />
        </el-form-item>
        <el-form-item label="邮费">
          <el-input v-model="form.postage" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="form.sort" />
        </el-form-item>
        <el-form-item label="销量">
          <el-input v-model="form.sales" />
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="form.stock" />
        </el-form-item>

        <el-form-item label="热卖单品">
          <el-radio v-model="form.isHot" :label="1">是</el-radio>
          <el-radio v-model="form.isHot" :label="0" style="width: 200px;">否</el-radio>
        </el-form-item>
        <el-form-item label="促销单品">
          <el-radio v-model="form.isBenefit" :label="1">是</el-radio>
          <el-radio v-model="form.isBenefit" :label="0" style="width: 200px;">否</el-radio>
        </el-form-item>
        <el-form-item label="精品推荐">
          <el-radio v-model="form.isBest" :label="1">是</el-radio>
          <el-radio v-model="form.isBest" :label="0" style="width: 200px;">否</el-radio>
        </el-form-item>
        <el-form-item label="首发新品">
          <el-radio v-model="form.isNew" :label="1">是</el-radio>
          <el-radio v-model="form.isNew" :label="0" style="width: 200px;">否</el-radio>
        </el-form-item>
        <el-form-item label="是否包邮">
          <el-radio v-model="form.isPostage" :label="1">是</el-radio>
          <el-radio v-model="form.isPostage" :label="0" style="width: 200px;">否</el-radio>
        </el-form-item>
        <el-form-item label="优品推荐">
          <el-radio v-model="form.isGood" :label="1">是</el-radio>
          <el-radio v-model="form.isGood" :label="0" style="width: 200px;">否</el-radio>
        </el-form-item>
        <el-form-item label="获得积分">
          <el-input v-model="form.giveIntegral" />
        </el-form-item>
        <el-form-item label="虚拟销量">
          <el-input v-model="form.ficti" />
        </el-form-item>

      </el-form>
    </div>

    <div slot="footer" class="page-footer">
      <el-button :loading="loading" type="primary" @click="doSave">草稿</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">发布</el-button>
    </div>

  </div>
</template>

<script>
import { getCates } from '@/api/yxStoreCategory'
import { getSuppliers } from '@/api/yxShopSupplier'
import { add, edit } from '@/api/yxStoreProduct'
import editor from '../../components/Editor'
// import picUpload from '@/components/pic-upload'
// import mulpicUpload from '@/components/mul-pic-upload'
import fileUpload from '@/components/file-upload'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import MaterialList from '@/components/material'
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'

export default {
  components: { editor, Treeselect, MaterialList, videoPlayer, fileUpload },
  props: {
    isAdd: {
      type: Boolean
      // required: true
    }
  },
  data() {
    return {
      loading: false, dialog: false, uploadDialog: false, cates: [], suppliers: [],
      form: {
        id: null,
        merId: 0,
        image: '',
        sliderImage: '',
        imageArr: [],
        sliderImageArr: [],
        videoImageArr: [],
        storeName: '',
        storeInfo: '',
        keyword: '',
        barCode: '',
        cateId: 0,
        price: 0,
        vipPrice: 0,
        otPrice: 0,
        postage: 0,
        unitName: '',
        sort: 0,
        sales: 0,
        stock: 0,
        isShow: 0,
        isHot: 0,
        isBenefit: 0,
        isBest: 0,
        isNew: 0,
        description: '',
        addTime: '',
        isPostage: 0,
        isDel: 0,
        merUse: 0,
        giveIntegral: 0,
        cost: 0,
        isSeckill: 0,
        isBargain: 0,
        isGood: 0,
        ficti: 0,
        browse: 0,
        codePath: '',
        soureLink: '',
        recommendation: '',
        supplierId: null,
        supplierName: '',
        videoImg: '',
        videoUrl: ''
      },
      rules: {
      },
      props: {
        id: 'id',
        label: 'label',
        children: 'children'
      },
      playerOptions: {
        // playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: '' // url地址
          }
        ],
        hls: true,
        poster: '', // 你的封面地址
        width: 250, // 播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      }
    }
  },
  computed: {

  },
  watch: {
    'form.imageArr': function(val) {
      if (val) {
        this.form.image = val.join(',')
      }
    },
    'form.sliderImageArr': function(val) {
      if (val) {
        this.form.sliderImage = val.join(',')
      }
    },
    'form.videoImageArr': function(val) {
      if (val) {
        this.form.videoImg = val.join(',')
        this.playerOptions.poster = this.form.videoImg
      }
    },
    'form.videoUrl': function(val) {
      console.log('watch === videoUrl ===>', val)
      if (val) {
        this.form.videoUrl = val
        this.playerOptions.sources[0].src = val
      }
    }
  },
  methods: {
    // listen event
    onPlayerPlay(player) {
      console.log('player play!', player)
    },
    onPlayerPause(player) {
      console.log('player pause!', player)
    },
    supplierClear() {
      this.form.supplieId = null
      this.form.supplierName = ''
    },
    supplierChage(val) {
      if (val) {
        const list = this.suppliers.filter(item => { return item.id === val })
        this.form.supplierName = list[0].name
      }
    },
    cancel() {
      this.$parent.init()
      this.resetForm()
    },
    doSubmit() {
      this.$confirm(`确定进行发布操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.loading = true
          this.form.isShow = 1
          if (this.isAdd) {
            this.doAdd()
          } else this.doEdit()
        })
        .catch(() => { })
    },
    doAdd() {
      add(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '添加成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    doEdit() {
      edit(this.form).then(res => {
        this.resetForm()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.init()
      }).catch(err => {
        this.loading = false
        console.log(err.response.data.message)
      })
    },
    doSave() {
      this.loading = true
      if (this.isAdd) {
        add(this.form).then(res => {
          this.form = res
          console.log('add=====>', res)
          this.$notify({
            title: '保存成功',
            type: 'success',
            duration: 2500
          })
          this.loading = false
          this.isAdd = false
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
      } else {
        edit(this.form).then(res => {
          console.log('edit=====>', res)
          this.$notify({
            title: '保存成功',
            type: 'success',
            duration: 2500
          })
          this.loading = false
        }).catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
      }
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.form = {
        id: '',
        merId: 0,
        image: '',
        sliderImage: '',
        imageArr: [],
        sliderImageArr: [],
        videoImageArr: [],
        storeName: '',
        storeInfo: '',
        keyword: '',
        barCode: '',
        cateId: 0,
        price: 0,
        vipPrice: 0,
        otPrice: 0,
        postage: 0,
        unitName: '',
        sort: 0,
        sales: 0,
        stock: 0,
        isShow: 0,
        isHot: 0,
        isBenefit: 0,
        isBest: 0,
        isNew: 0,
        description: '',
        addTime: '',
        isPostage: 0,
        isDel: 0,
        merUse: 0,
        giveIntegral: 0,
        cost: 0,
        isSeckill: 0,
        isBargain: 0,
        isGood: 0,
        ficti: 0,
        browse: 0,
        codePath: '',
        soureLink: '',
        recommendation: '',
        supplierId: null,
        supplierName: '',
        videoImg: '',
        videoUrl: ''
      }
    },
    getCates() {
      getCates({ enabled: true }).then(res => {
        this.cates = res.content
        if (!this.form.cateId) {
          this.form.cateId = this.cates[0].id
        }
      })
    },
    getSuppliers() {
      getSuppliers({ enabled: true }).then(res => {
        this.suppliers = res.content
        if (!this.form.supplierId) {
          this.form.supplierId = this.suppliers[0].id
          this.form.supplierName = this.suppliers[0].name
        }
      })
    }
  }
}
</script>

<style scoped>
.form-body{
  padding: 30px;
  /* height: 550px; */
  overflow-y: auto
  /* display: flex */
  /* position: relative; */
}
</style>
